<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问内容</title>
    <script>
        function f1(){
            let d1 = document.getElementById("d1");
            // 取值:通过对象名.innerHTML访问标签体内容
            // 该方式能够识别到标签体中存在的子标签
            // 返回的内容包含子标签名
            console.log(d1.innerHTML);

            // 赋值,能够识别标签
            // 赋值后,页面中会展示标签效果
            d1.innerHTML = "<h2>这是通过innerHTML重新进行赋值的内容</h2>";
        }

        function f2(){
            let d2 = document.getElementById("d2");
            // 取值:通过innerText访问标签体内容
            // 该方式不能识别子标签,只能识别到文本内容
            // 返回的内容不包含子标签,只有纯文本
            console.log(d2.innerText)

            // 赋值,不识别标签
            // 赋值后,页面中会把标签作为普通字符串展示出来,而不会体现标签效果
            d2.innerText = "<h2>这是通过innerText重新进行赋值的内容</h2>";
        }
    </script>
</head>
<body>
<div id="d1" onclick="f1()" style="width: 400px;height: 100px;background-color: red;">
    <h2>通过innerHTML访问</h2>
</div>
<hr>
<div id="d2" onclick="f2()" style="width: 400px;height: 100px;background-color: green;">
    <h2>通过innerText访问</h2>
</div>
</body>
</html>